<template>
  <div ref="barcharts" style="width: 40vw; height: 50vh"></div>
</template>

<script>
import theme from '@/utils/theme.js'

export default {
  name: 'BarCharts',
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    dateList(data) {
      data.map(function (item) {
        return item[0]
      })
    },
    valueList(data) {
      data.map(function (item) {
        return item[1]
      })
    },
    initEcharts() {
      this.$echarts.registerTheme('darkTheme', theme.darkTheme)
      this.chartInstance = this.$echarts.init(this.$refs.barcharts, 'darkTheme')
      // this.chartInstance = this.$echarts.init(this.$refs.barcharts, 'dark')
      const option = {
        legend: {
          width: 1000,
          left: 0
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
          ]
        },
        xAxis: [
          {
            type: 'category',
            gridIndex: 0
          },
          {
            type: 'category',
            gridIndex: 1
          }
        ],
        yAxis: [
          {
            gridIndex: 0
          },
          {
            gridIndex: 1
          }
        ],
        grid: [
          {
            bottom: '55%'
          },
          {
            top: '55%'
          }
        ],
        series: [
          {
            type: 'line',
            seriesLayoutBy: 'row'
          },
          {
            type: 'line',
            seriesLayoutBy: 'row'
          },
          {
            type: 'line',
            seriesLayoutBy: 'row'
          },
          {
            type: 'line',
            seriesLayoutBy: 'row'
          },
          {
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          // {
          //   type: 'bar',
          //   xAxisIndex: 1,
          //   yAxisIndex: 1
          // }
        ]
      }
      this.chartInstance.setOption(option)
    }
  }
}
</script>
